<template>
	<div class="sin_label" :id="`label_${prop.index}`" :style="prop.style">{{ prop.text }}</div>
</template>

<script setup>
import { onMounted } from 'vue';
let prop = defineProps(['index', 'styly', 'text', 'changDefaultLabel']);

onMounted(() => {
	setClickChangeTag();
});

function setClickChangeTag() {
	let localEle = document.getElementById(`label_${prop.index}`);
	localEle.addEventListener('click', () => {
		// console.log(prop.index);
		prop.changDefaultLabel(prop.index);
	});
}
</script>

<style scoped lang="scss">
.sin_label {
	padding: 20px;
	text-align: center;
	min-width: 60px;

	cursor: pointer;
}
</style>
